<template>
  <view class="warn" :style="{ top: offHeight + 'px' }" v-if="closeFlag">
    <view class="text">{{ text }}</view>
    <image
      @click="closeClick"
      class="img_box"
      src="https://cdn1.visiotrip.com/h5AndMini/2024-08-16/closeBtn.png"
    ></image>
  </view>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default:
        "⚠️为了您的顺利出游和资金安全，🚫请勿私下转账给其他人，请通过小程序直接下单购买。",
    },
    offHeight: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      closeFlag: true,
    };
  },
  methods: {
    closeClick() {
      this.$emit("closeCog",this.closeFlag);
      this.closeFlag = false;
    },
  },
};
</script>

<style scoped lang="scss">
.warn {
  position: fixed;
  // top: 60px;
  left: 0;
  z-index: 999;
  height: 68rpx;
  width: 100%;
  line-height: 68rpx;
  background: #ffe5e8;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  .text {
    display: inline-block;
    padding-left: 100%;
    animation: scroll 13s linear infinite;
  }
  .img_box {
    position: absolute;
    top: 50%;
    right: 11rpx;
    transform: translateY(-50%);
    z-index: 1000;
    width: 42rpx;
    height: 42rpx;
  }
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
